<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>Class与Style绑定</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们
可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。
因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除
了字符串之外，还可以是对象或数组。-->
    <style type="text/css">
        .active{
            color: #2288ff;

        }
        .static{
            background-color: green;
        }
        .text-danger{
            size: 100px;
            font-style:italic;
        }
    </style>
</head>
<body>
<div id = "exm1" v-bind:class="{ active:isActive,'text-danger':hasError}" class="static">vue的Class与Style绑定</div>
<!--绑定的数据对象不必内联定义再模板里面-->
<!--对象语法-->
<div id = "exm2" v-bind:class="classObject">vue的Class与Style绑定</div>
<div id = "exm3" v-bind:class="classObject">vue的Class与Style绑定</div>
<!--数据语法-->
<div id = "exm4" v-bind:class="[activeClass,errorClass]">vue的Class与Style绑定</div>
<!--数组语法中使用对象语法-->
<div id = "exm5" v-bind:class="[{ active : isActive},errorClass]">vue的Class与Style绑定</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm1 = new Vue({
        el:'#exm1',
        data: {
            isActive:false,
            hasError:true
        }
    })

    var vm2 = new Vue({
        el:'#exm2',
        data: {
            classObject:{
                active:true,
                'text-danger':false,
            }
        }
    })

    var vm3 = new Vue({
        el:'#exm3',
        data: {
            isActive: true,
            error: null
        },
        computed: {
            classObject: function () {
                return {
                    active: this.isActive && !this.error,
                    'text-danger':this.error && this.error.type === 'fatal'
                }
            }
        }
    })

    var vm4 = new Vue({
        el:'#exm4',
        data: {
            activeClass:'active',
            errorClass:'text-danger'
        }
    })

    var vm5 = new Vue({
        el:'#exm5',
        data: {
            isActive:false,
            errorClass:'text-danger'
        }
    })
</script>
</html>